<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>jQuery Table</title>
		<link rel="stylesheet" href="jquery.table.css" />
        <script type="text/javascript" src="jquery.min.js"></script>
        <script type="text/javascript" src="jquery.pagination.js"></script>
        <script type="text/javascript" src="jquery.table.js"></script>
        
        <script type="text/javascript">
            // When document has loaded, initialize table
            $(document).ready(function() {
                 //声明列模型
                var columns = [{
                    title: '表头1(20%)',
                    field: 'a',
                    width: '20%'
                }, {
                    id: '123',
                    title: '表头2(30%)',
                    field: 'b',
                    width: '30%'
                }, {
                    title: '表头3(50%)',
                    field: 'c',
                    width: '50%',
                    render: function(row) {
                        this.html('<a>' + (row.c || "") + '</a>');
                    }
                }];

                var data = {
                    data: [
                        {a: '123'}, 
                        {a: 'cdd',b: 'edd'}, 
                        {a: '1333',c: 'eee',d: 2}, 
                        {a: '123'}, 
                        {a: 'cdd',b: 'edd'}, 
                        {a: '1333',c: 'eee',d: 2}, 
                        {a: '123'},
                        {a: 'cdd',b: 'edd'}, 
                        {a: '1333',c: 'eee',d: 2}, 
                        {a: '123'}, 
                        {a: 'cdd',b: 'edd'},
                        {a: '1333',c: 'eee',d: 2}
                    ],
                    totalCount: 12
                }; //显示的数据

                $("#grid").jtable({
                    columns: columns,
                    source: data,
                    pageContainer: $("#page"),
                    pageCallback:function(pageIndex){
                        // 点击的页数
                        alert(pageIndex);
                    },
                    successCallback:function(){
                        alert("render success");
                    }
                });
            });
            
        </script>
    </head>
    <body>
    	<table id="grid" class="jq-table">
    		<thead>
    			<tr>
    				<th></th>
    				<th></th>
    				<th></th>
    			</tr>
    		</thead>
        </table>
        <div id="page"></div>

    </body>
</html>
